import React, { Component } from 'react';
import ReactDom from 'react-dom';
import {Button,Dialog,Form,Input} from 'element-react';
export class Phone extends Component {
    constructor(props) {
        super(props);

        this.state = {

            form: {
                phone: IData.mobileNo
            },
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: (rule, value, callback) => {
                        if (value.length != '11'||isNaN(value)) {
                            callback(new Error('请输入正确的手机号'));
                        } else {
                            callback();
                        }
                    }
                    }
                ]},
            value1: '13823457890',
            dialogVisible: false

        };
    }
    onPhoneChange(value) {
        this.setState({
            form: Object.assign({}, this.state.form, { phone: value}),
        });
    }
    changeValue(){
        this.setState({ dialogVisible: false });

        this.refs.form.validate((valid) => {
            if (valid) {
                let value1=this.state.form.phone;
                this.setState({
                    value1
                })
            }
            else {
                this.setState({
                    value1:"13823457890"
                })
            }
        });
    }
    render() {
        return (

            <div className="zy1">
                <Button type="text"className="font" onClick={ () => this.setState({ dialogVisible: true }) }>                <span value={this.state.form.phone}>{this.state.value1}</span>
                    &nbsp;&nbsp;&nbsp;<i className="el-icon-arrow-right el-icon-edit"></i></Button>
                <Dialog
                    title="手机号"
                    size="middle"
                    visible={ this.state.dialogVisible }
                    onCancel={ () => this.setState({ dialogVisible: false }) }
                >
                    <Dialog.Body>
                        <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="100">
                            <Form.Item prop="phone" label="手机号">
                                <Input value={this.state.form.phone} onChange={this.onPhoneChange.bind(this)} ></Input>
                            </Form.Item>
                        </Form>
                    </Dialog.Body>
                    <Dialog.Footer className="dialog-footer">
                        <Button type="primary" onClick={ this.changeValue.bind(this) }>保存</Button>
                    </Dialog.Footer>
                </Dialog>
            </div>
        )
    }

}